/* Looking Glass */

// Dialog
#LookingGlassDialog {

  @extend %osd_panel;
  background-color: transparentize($osd_bg_color,0.02);
  color: $osd_fg_color;

  border-radius: $modal_radius;
  margin-top: $base_margin;
  border: 2px solid transparent;
  padding: $base_padding;
  spacing: $base_padding;
  box-shadow: 0 2px 4px 0 $shadow_color;

  @if $contrast == 'high' {
    border-color: $hc_inset_color;
    background-color: $osd_bg_color;
    box-shadow:none;
  }

  & > #Toolbar {
    border: none;
    padding: $base_padding;
    border-radius: 0;
    background-color: transparent;
    spacing: $base_padding;

    .lg-toolbar-button {
      @extend %osd_button;
      padding: $base_padding $base_padding * 2;

      & > StIcon { icon-size: $base_icon_size; }
    }
  }

  .labels {
    spacing: $base_padding;
  }

  .notebook-tab {
    @extend %osd_button;
    -natural-hpadding: $base_padding * 2;
    -minimum-hpadding: $base_padding * 2;
    padding: $base_padding $base_padding * 2;
  }

  StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
  StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
}

.lg-dialog {

  StEntry {
    @extend %osd_entry;
    min-height: to_em(22px);
  }

  .shell-link {
    color: $link_color;
    &:hover { color: lighten($link_color, 10%); }
    &:active { color: darken($link_color, 10%); }
   }

  .actor-link {
    color: $insensitive_fg_color;
    &:hover { color: lighten($insensitive_fg_color, 20%); }
    &:active { color: darken($insensitive_fg_color, 20%); }

    & StIcon { icon-size: 12px; }
   }
}

.lg-completions-text {
  @extend %caption;
  font-style: italic;
}

.lg-obj-inspector-title {
  spacing: $base_padding;
}

.lg-obj-inspector-button {
  border: 1px solid $borders_color;
  padding: 4px;
  border-radius: $base_border_radius;
  &:hover { border: 1px solid $fg_color; }
}

// Extensions
#lookingGlassExtensions { padding: $base_padding; }

.lg-extensions-list {
  padding: $base_padding;
  spacing: $base_padding;
}

.lg-extension {
  @extend %card;
}

.lg-extension-name {
  @extend %heading;
}

.lg-extension-meta {
  spacing: $base_padding;
}

// Inspector
#LookingGlassPropertyInspector {
  background: $bg_color;
  border: 1px solid $borders_color;
  border-radius: $base_border_radius;
  padding: $base_padding;
}

.lg-debug-flag-button {
  StLabel { padding: $base_padding, 2 * $base_padding; }

  color: $osd_fg_color;
  &:hover { color: lighten($osd_fg_color, 20%); }
  &:active { color: darken($osd_fg_color, 20%); }
}

.lg-debug-flags-header {
  padding-top: 2 * $base_padding;
  padding: $base_padding;
  @extend %title_2;
}
